<template>
	<view class="query_piaol">
		<Screen :showScreen="showScreen" :screenList='screenList' @cahngeCategorys="cahngeCategorys"/>
		<view class="screen" @click="changeScreen">
			<text>{{navAllTitle}}</text>
			<image class="screen_img" :class="showScreen? 'rotate_img':''" :src="require('../status/image/souqi.png')" mode=""></image>
			 <view class="search_piaol" @click.stop="goToQueryPiaol">
			 	<u-icon name="search" size="40"></u-icon> 
			 </view>
		</view>
		 
		<view class="piaol_nav">
			<text 
				class="nav_item" 
				v-for="(item,index) in piaolNavList" 
				:key="item.id" 
				@click="changeNav(index,item.id)"
				:class="currentNav == index? 'current_nav':''"
				>{{item.name}}</text>
		</view>
		<!-- 列表 -->
		<scroll-view class="piaol_list" scroll-y v-if="piaolList.length > 0">
			<navigator hover-class="none" :url=" 'piaoldetails/index?id=' + item.id" class="piaol_items" v-for="(item,index) in piaolList" :key="index">
				<image class="items_img" :src="item.thumb" mode=""></image>
				<view class="items_fr">
					<text>{{item.as}}</text>
					<text style="color: #c7c7c7;">{{item.name}}</text>
					<text style="color: #63cb76;">嘌呤值 {{item.purine}}mg/100g</text>
				</view>
			</navigator>
		</scroll-view> 
		<view style="background-color: #f8f8f8; text-align: center; padding-top: 80rpx; font-size: 34rpx;" v-else>
			暂无数据
		</view> 
	</view>
</template> 

<script>
	import Screen from './screen/screen.vue'
	export default {
		components:{
			Screen
		},
		onShow() {
			// this.getPurine()
			this.getCategorys()
			this.getTypes()
		},
		onLoad(options) {
			options.keyword? this.keyword = options.keyword : ''
			this.getPurine()
		},
		data() {
			return {
				currentNav: 0,
				showScreen: false,
				screenList: [],
				piaolNavList: [],
				piaolList: [],
				cate_id: '',
				type_id: '',
				keyword: '',
				page: 1,
				navAllTitle: '全部'
			}
		},
		methods:{
			// 切换顶部nav数据
			changeNav(index, id){ 
				this.currentNav = index
				this.type_id = id
				this.getPurine()
			},
			changeScreen(){
				this.showScreen = !this.showScreen
			},
			// 分类
			cahngeCategorys(cateId,name){ 
				this.cate_id = cateId
				this.navAllTitle = name
				this.getPurine()
			},
			// 查询嘌呤
			getPurine(){
				this.$api.sendRequest({
					url: '/api/purine/lists',
					data:{
						cate_id: this.cate_id,
						type_id: this.type_id,
						keyword: this.keyword,
						page: this.page
					},
					success: res => { 
						if(res.code >= 0){
							this.piaolList = res.data.data
						} 
					},
					
				})
			},
			// 获取所有分类
			getCategorys(){
				this.$api.sendRequest({
					url: '/api/purine/getCategorys',
					success: res => {
						if(res.code >= 0){ 
							this.screenList = res.data
						}
					 
					} 
				})
			},
			// 查询所有类别 nav栏
			getTypes(){ 
				this.$api.sendRequest({
					url: '/api/purine/getTypes',
					success: res =>  {  
						if(res.code >= 0){
							this.piaolNavList = res.data 
						} 
					} 
				})
			},
		 
			// 前往查询嘌呤页面
			goToQueryPiaol(){
				uni.redirectTo({ 
					url: '../searchPage/index'
				})
			}
		},
	}
</script>

<style lang="less" scoped>
.query_piaol{
	background-color: #fff;
	.screen{
		position: relative;
		text-align: center;
		font-size: 34rpx;
		.screen_img{
			margin-left: 10rpx;
			width: 25rpx; 
			height: 25rpx;
		}
		.rotate_img{
			transform: rotate(180deg);
		}
		.search_piaol{
			position: absolute;
			top: 10rpx;
			right: 240rpx;
		}
	}
	.piaol_nav{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #fafafa;
		.nav_item{
			flex: 1;
			text-align: center;
		}
	}
	.piaol_list{
		height: calc(100vh - 140rpx);
		.piaol_items{ 
			display: flex;
			padding: 20rpx;
			height: 180rpx; 
			.items_img{
				width: 200rpx;
				height: 100%;
				background-color: #eee;
			}
			.items_fr{ 
				position: relative;
				padding: 10rpx 0;
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&::after{
					content:'';
					position: absolute;
					top: 50%;
					right: 0;
					width: 10rpx;
					height: 10rpx;
					background-color: #f4635f;
					border-radius: 50%;
				}
			}
		}
		& .piaol_items:nth-child(even) {
			border-bottom: 2rpx solid #eee;
		}
	}
}
.current_nav{
	color: #6ac67b;
	border-bottom: 6rpx solid #6ac67b;
}
</style>
